<!-- 
	Github: https://github.com/xiaoyanu/Home-page 
	Author： 小言u
	E-mail： zxz.ee@qq.com
	Website: zxz.ee
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="icon" type="image/ico" href="https://zxz.ee/favicon.ico">
		<title>小言u - 个人主页</title>
		<!-- 引入Bootstrap icon图标库 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
		<!-- CSS文件 -->
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.11.26/more/homepage.js"></script>
	</head>
	<body>
		<div id="main-box">
			<div id="head">
				<img id="touxiang" src="https://zxz.ee/touxiang.png">
				<p id="nick">XiaoYanU</p>
				<!-- 调用一言文字API ，如不使用请将此段注释掉，并将下段的注释取消掉 -->
				<p id="info"><span id="hitokoto_text">ヾ(•ω•`)o加载中……</span></p>
				<!-- 显示自定义一段文字 -->
				<!-- <p id="info">凡是美好 都留有遗憾</p> -->
			</div>
			<div id="main-1">
				<p class="title">[ 开源作品 ]</p>
				<!-- 如果你要更换卡片背景图的话
						背景图大小为：180×70 （高斯模糊效果需要自己添加）-->
				<p class="kapian" style="background: url(img/demo.jpg) center;">
					<a href="https://zxz.ee/test" target="_blank" style="color: #000;">
						<span class="kapian-title"><i class="bi bi-github"></i> 作品展示/实验室</span>
					</a>
				</p>
				<p class="kapian" style="background: url(img/fwq.jpg) center;">
					<a href="https://github.com/xiaoyanu/server-list-test" target="_blank" style="color: #000;">
						<span class="kapian-title"><i class="bi bi-github"></i> MC服务器列表</span>
					</a>
				</p>
			</div>
			<div id="main-2">
				<p class="main-2-text">
					<i class="bi bi-gender-male" style="color: blue;"></i>
					性别：男</p>
				<p class="main-2-text">
					<i class="bi bi-activity" style="color: #ff3d00;"></i>
					年龄：17</p>
				<p class="main-2-text">
					<i class="bi bi-geo-alt-fill" style="color: #304ffe;"></i>
					出生于：山东</p>
				<p class="main-2-text">
					<i class="bi bi-app-indicator" style="color: #dd2c00;"></i>
					状态：学生（<span style="color: red;">未恋爱</span>）
				</p>
				<p class="main-2-text">
					<i class="bi bi-chat-dots-fill" style="color: #00c853;"></i>
					QQ：<a href="http://wpa.qq.com/msgrd?v=3&uin=1872786834&site=qq&menu=yes" target="_blank">1872786834</a>
				</p>
				<p class="main-2-text">
					<i class="bi bi-envelope"></i>
					Email：<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=zxz.ee@qq.com" target="_blank">zxz.ee@qq.com</a>
				</p>
			</div>
			<div id="main-3">
				<p class="title">[ 个人网站 ]</p>
				<!-- 如果你要更换卡片背景图的话
						背景图大小为：180×70 （高斯模糊效果需要自己添加，最好在背景图周围添加一点淡淡的白色，这样效果更加~）-->
				<p class="kapian" style="background: url(img/boke.jpg) center;">
					<a href="https://zxz.ee/" target="_blank" style="color: #000;">
						<span class="kapian-title"><i class="bi bi-journal-richtext"></i> 小言u博客</span>
					</a>
				</p>
				<p class="kapian" style="background: url(img/i.jpg) center;">
					<a href="#" target="_blank" style="color: #000;">
						<span class="kapian-title"><i class="bi bi-heart"></i> 爱情小站</span>
					</a>
				</p>
			</div>
			<div id="footer">
				&copy;2021 <a href="https://zxz.ee" style="color: #000;">小言u</a>
			</div>
		</div>
		<!-- 一言API -->
		<!-- 如果不启用API请将整段 script 注释掉 -->
		<script>
		// 接口介绍：
		// 	k 文案相关：来源网络
		// 	f 文案相关：哲学
		// 	e 文案相关：原创
		// 	i 文案相关：诗词
		// 	a 文案相关：动画
		// 	g 文案相关：其他
		// 	h 文案相关：影视
		// 如果要更改请修改 "/?j=" 后半部分的
		// 例如：https://v1.hitokoto.cn/?j=k
		// 代表引用来自网络相关的文案
		  fetch('https://v1.hitokoto.cn/?j=k')
		    .then(response => response.json())
		    .then(data => {
		      const hitokoto = document.getElementById('hitokoto_text')
		      hitokoto.innerText = data.hitokoto
		    })
		</script>
	</body>
</html>
